<template>
  <div :class="['drawerClass', cname]">
    <h4>{{ title }}</h4>
    <div class="drawer-box">
      <div v-for="(item,index) in command" :key="index" class="drawer-item">
        <nuxt-link :to="{path: `/listDetail/${item.id}`}">
          <img :src="item.picUrl" :alt="item.picUrl">
          <p>{{ item.name }}</p>
        </nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cname: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
    }
  },
  computed: {
    command () {
      // 推荐歌单列表
      let _list = this.list
      try {
        _list = _list.slice(0, 6)
      } catch (error) { }
      return _list
    }
  },
  mounted () {

  }
}
</script>

<style  lang="scss" scoped>
@import "@/assets/style/global.scss";

.drawerClass {
  width: 100%;
  position: relative;
  h4 {
    width: calc(100% - 16px);
    height: 36px;
    margin: 0 auto;
    line-height: 40px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1PX solid rgba(0,0,0,.1);
    box-sizing: border-box;
  }
  .drawer-more {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .drawer-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-left: 2px;
    padding-right: 2px;
    .drawer-item {
      width: 33.333333333%;
      padding: 6px;
      box-sizing: border-box;
      a {
        width: 100%;
        img {
          border-radius: 6px;
          box-sizing: border-box;
        }
        p {
          width: 100%;
          // text-overflow: ellipsis;
          // white-space: nowrap;
          // overflow: hidden;
          @include ellipsis(2);
          font-size: 12px;
          color: #333;
        }
      }
    }
  }
}
</style>
